<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="会员管理" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="vipmanage">
			<view class="vipmanage-title">
				<view @click="onClickSelectIndex(0)" :class="{ 'vipmanage-title-item-active': selectIndex === 0 }" class="vipmanage-title-item">今日新增</view>
				<view @click="onClickSelectIndex(1)" :class="{ 'vipmanage-title-item-active': selectIndex === 1 }" class="vipmanage-title-item">过去一周</view>
				<view @click="onClickSelectIndex(2)" :class="{ 'vipmanage-title-item-active': selectIndex === 2 }" class="vipmanage-title-item">全部会员</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="todayMore" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="todayMore" :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" scroll-y class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item of todayData" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="weekMore" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="weekMore" :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" scroll-y class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item of weekData" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view @scrolltolower="allMore" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="vipmanage-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view @scrolltolower="allMore" :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" scroll-y class="vipmanage-list">
			<!-- #endif -->
				<view v-for="item of totalData" :key="item.id" class="vipmanage-list-item">
					<image class="vipmanage-list-item-avatar"></image>
					<view class="vipmanage-list-item-middle">
						<text class="vipmanage-list-item-middle-name">昵称：{{ item.nickname }}</text>
						<text class="vipmanage-list-item-middle-tel">手机号码：{{ item.phone }}</text>
						<text class="vipmanage-list-item-middle-tel">消费次数：{{ item.consumptionFrequency }}</text>
						<text class="vipmanage-list-item-middle-tel">推荐人数：{{ item.recommendedNumber }}</text>
					</view>
					<view class="vipmanage-list-item-right">
						<text class="vipmanage-list-item-right-time">注册时间：{{ item.registeredAt }}</text>
						<text class="vipmanage-list-item-right-time">累计消费：¥{{ item.totalConsumption }}</text>
						<text class="vipmanage-list-item-right-time">推荐人：{{ item.recommender }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { config } from '@/utils/config.js'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	data() {
		return {
			selectIndex: 0,
			h5ListHeight: 0,
			appListHeight: 0,
			// 今日的数据
			todayData: [],
			todayPage: 1,
			todaySize: 10,
			todayTotal: 0,
			todayTotalPage: 0,
			// 本周的数据
			weekData: [],
			weekPage: 1,
			weekSize: 10,
			weekTotal: 0,
			weekTotalPage: 0,
			// 所有的
			totalData: [],
			totalPage: 1,
			totalSize: 10,
			totalTotal: 0,
			totalTotalPage: 0,
		}
	},
	components: {
		uniNavBar
	},
	onLoad() {
		const token = uni.getStorageSync('h_token')
		if (!token) {
			uni.showToast({
				icon: 'none',
				title: '尚未登录, 请先登录'
			})
			setTimeout(() => {
				uni.removeStorageSync('h_role')
				uni.removeStorageSync('h_memberId')
				uni.removeStorageSync('h_token')
				uni.removeStorageSync('h_openId')
				uni.reLaunch({
					url: '../verificationcodelogin/verificationcodelogin'
				})
			}, 777)
			return false
		}
		this._getTodayData()
		this._getWeekData()
		this._getAllData()
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.selectIndex === 0) {
			this.todayData = []
			this.todayPage = 1
			this.todaySize = 10
			this.todayTotal = 0
			this.todayTotalPage = 0
			this._getTodayData()
		} else if (this.selectIndex === 1) {
			this.weekData = []
			this.weekPage = 1
			this.weekSize = 10
			this.weekTotal = 0
			this.weekTotalPage = 0
			this._getWeekData()
		} else if (this.selectIndex === 2) {
			this.totalData = []
			this.totalPage = 1
			this.totalSize = 10
			this.totalTotal = 0
			this.totalTotalPage = 0
			this._getAllData()
		}
	},
	onReady() {
		const that = this
		uni.getSystemInfo({
			success: ((res) => {
				let info = uni.createSelectorQuery().select(".vipmanage-title");
				info.boundingClientRect(function(data) {
					that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
					that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
				}).exec()
			})
		})
	},
	methods: {
		back() {
			uni.navigateBack({})
		},
		pageTotal(rowCount, pageSize) {
			if (rowCount === null || rowCount === "") {
				return 0;
			} else {
				if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
					return parseInt(rowCount / pageSize)
				}
				if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
					return parseInt(rowCount / pageSize) + 1
				}
			}
		},
		onClickSelectIndex(index) {
			this.selectIndex = index
		},
		_getTodayData() {
			const page = this.todayPage
			const size = this.todaySize
			uni.request({
				url: `${config.api_base_url}merchant/merchantMember/findTodayMembers/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true && data && data.rows) {
						this.todayTotal = data.total
						this.todayTotalPage = this.pageTotal(this.todayTotal, this.todaySize)
						this.todayData = this.todayData.concat(data.rows)
					} else {
						this.todayTotal = 0
						this.todayTotalPage = 0
						this.todayData = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			})
		},
		_getWeekData() {
			const page = this.weekPage
			const size = this.weekSize
			uni.request({
				url: `${config.api_base_url}merchant/merchantMember/findWeekMembers/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true && data && data.rows) {
						this.weekTotal = data.total
						this.weekTotalPage = this.pageTotal(this.weekTotal, this.weekSize)
						this.weekData = this.weekData.concat(data.rows)
					} else {
						this.weekTotal = 0
						this.weekTotalPage = 0
						this.weekData = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			})
		},
		_getAllData() {
			const page = this.totalPage
			const size = this.totalSize
			uni.request({
				url: `${config.api_base_url}merchant/merchantMember/findTotalMembers/${page}/${size}`,
				header: {
					AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
				},
				success: ((res) => {
					let { status, data } = res.data
					if (status.flag === true && data && data.rows) {
						this.totalTotal = data.total
						this.totalTotalPage = this.pageTotal(this.totalTotal, this.totalSize)
						this.totalData = this.totalData.concat(data.rows)
					} else {
						this.totalTotal = 0
						this.totalTotalPage = 0
						this.totalData = []
					}
				}),
				fail: (() => {
					uni.showToast({
						icon: 'none',
						title: '请求失败, 网络异常'
					})
				}),
				complete: (() => {
					uni.stopPullDownRefresh()
				})
			})
		},
		todayMore() {
			const page1 = this.todayPage + 1;
			const totalPage = this.todayTotalPage
			if (page1 <= totalPage) {
				this.todayPage = page1
				this._getTodayData()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		weekMore() {
			const page1 = this.weekPage + 1;
			const totalPage = this.weekTotalPage
			if (page1 <= totalPage) {
				this.weekPage = page1
				this._getWeekData()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		},
		allMore() {
			const page1 = this.totalPage + 1;
			const totalPage = this.totalTotalPage
			if (page1 <= totalPage) {
				this.totalPage = page1
				this._getAllData()
			} else {
				uni.showToast({
					title: '已经到底部了',
					icon: 'none'
				})
			}
		}
	}
}
</script>
<style>
page {
	background-color: #F7F4F8;
}
</style>
<style scoped>
.vipmanage {
	width: 100%;
}
.vipmanage-title {
	width: 100%;
	height: 64rpx;
	background-color: #fff;
	box-sizing: border-box;
	padding-left: 16rpx;
	padding-right: 14rpx;
	display: flex;
	align-items: center;
}
.vipmanage-title-item {
	width: 33.33%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
}
.vipmanage-title-item-active {
	color: #F02230;
	position: relative;
}
.vipmanage-title-item-active::after {
	position: absolute;
	content: ' ';
	left: 50%;
	margin-left: -31rpx;
	bottom: -8rpx;
	width: 62rpx;
	height: 4rpx;
	background-color: #F02230;
	border-radius: 2rpx;
}
.vipmanage-list {
	width: 100%;
	box-sizing: border-box;
	padding-top: 18rpx;
	padding-left: 16rpx;
	padding-right: 14rpx;
	display: flex;
	flex-direction: column;
}
.vipmanage-list-item {
	box-sizing: border-box;
	padding-top: 24rpx;
	padding-left: 36rpx;
	padding-bottom: 20rpx;
	display: flex;
	align-items: flex-start;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 10rpx;
}
.vipmanage-list-item:last-child {
	margin-bottom: 0;
}
.vipmanage-list-item-avatar {
	width: 74rpx;
	height: 74rpx;
	border-radius: 50%;
	background-color: red;
	margin-right: 36rpx;
}
.vipmanage-list-item-middle {
	display: flex;
	flex-direction: column;
}
.vipmanage-list-item-middle-name {
	font-size: 28rpx;
	line-height: 40rpx;
	color: rgba(0, 0, 0, 0.85);
	font-weight: 600;
	margin-bottom: 6rpx;
}
.vipmanage-list-item-middle-tel {
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #999;
	margin-bottom: 2rpx;
}
.vipmanage-list-item-middle-tel:last-child {
	margin-bottom: 0;
}
.vipmanage-list-item-right {
	margin-top: 46rpx;
	margin-left: 18rpx;
	display: flex;
	flex-direction: column;
}
.vipmanage-list-item-right-time {
	font-size: 24rpx;
	font-weight: 400;
	line-height: 34rpx;
	color: #999;
	margin-bottom: 2rpx;
}
</style>
